<!--
 * @Date: 2024-05-13 13:54:21
 * @LastEditTime: 2024-12-06 10:00:12
 * @LastEditors: Jimssare 1424477176@qq.com
 * @Description: 
 * @FilePath: \allitem\src\views\vue-test\components\Reactivity.vue
 * 
-->
<template>
	<div class="fdisc" style="width: 100%; height: 100%; justify-content: center; align-items: center">
		<div class="fdisr" style="margin-bottom: 20px">
			<el-button @click="someRefObj.school.name = 'Stiven'" type="danger">Change Ref</el-button>
			<el-button @click="changeName" type="primary">Change</el-button>
			<el-button @click="ChangeShallowRef" type="warning">Change ShallowRef</el-button>
		</div>
		<div class="fdisr" style="width: 100%">ref:{{ someRefObj.name }} ShallowRef:{{ someShallowRef.name }}</div>

		<el-row style="width: 100%">
			<el-col :span="6">
				<el-form-item label="Name">
					<el-input v-model="someRefObj.name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6"> </el-col>
			<el-col :span="6"> </el-col>
			<el-col :span="6"> </el-col>
		</el-row>
		<el-row style="width: 100%; border:1px solid #ccc">
			<el-col :span="6">
				<el-form-item label="Name">
					<el-input v-model="someShallowRef.name" @input="onSRnameChange"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6"> </el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, shallowRef, toValue,onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
let someRefObj = ref({ 
	name: "John",
	school: {
		location: "New York",
	},
});



let props = defineProps({
	value:{
		type:Object,
	},
	showInfo:{
		type:Boolean,
	},
})

let someShallowRef = shallowRef({
	name: "stiven",
	school: {
		location: "San Francisco",
	},
});

function changeName() {
	someRefObj.value.school.location = "Los Angeles";
	// someShallowRef.value.school.location = "BeiJing"
	// someShallowRef.value.name = "Jim"
	someShallowRef.value = {
		name: "Jim",
		school: {
			location: "BeiJing",
		},
	};
}

function initData(data) {
	someShallowRef.value = toValue(data);
	// console.log("initData", someShallowRef.value);
}

function ChangeShallowRef() {
	someShallowRef.value = {
		name: "Jin",
		school: {
			location: "ShangHai",
			name: "ShangHaiUniversity",
		},
	};
}

function onSRnameChange(e){
	console.log("onSRnameChange", e)
}

onMounted(()=>{
	console.log("props",props)
})

defineExpose({ initData });
</script>

<style scoped>
.fdisc {
	color: black;
	font-size: 24px;
}
</style>
